<template>
  <div class="div" style="width: 220px;height: 694px;background-color: #545c64;overflow: auto;">
    <el-row>
      <el-col :span="24">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <router-link to="/adminHome">
            <el-menu-item index="0">
              <i class="el-icon-menu" />
              <span slot="title">管理员主页</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/leaderPersonnel">
                <el-menu-item index="1-1">领导管理</el-menu-item>
              </router-link>
              <router-link to="/teacherPersonnel">
                <el-menu-item index="1-2">教师管理</el-menu-item>
              </router-link>
              <router-link to="/teachingSecretaryPersonnel">
                <el-menu-item index="1-3">教学秘书管理</el-menu-item>
              </router-link>
              <router-link to="/studentPersonnel">
                <el-menu-item index="1-4">学生管理</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">领导权限</el-menu-item>
              <router-link to="/teacherAuthority">
                <el-menu-item index="2-2">教师权限</el-menu-item>
              </router-link>
              <el-menu-item index="2-3">教学秘书权限</el-menu-item>
              <router-link to="/studentAuthority">
                <el-menu-item index="2-4">学生权限</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'left',
  data () {
    return {
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
</style>
<style scoped>
  .div{
    overflow: auto
  }

  .div::-webkit-scrollbar{
    display: none;
  }
</style>
